<#include "_layout.html"/>
<#macro script_import>
 <script src="${CPATH}/counter?cid=${content.id!}"></script>
</#macro>
<#macro script>
$(document).ready(function() {
  $('code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
  $('video,audio').mediaelementplayer();
});
function reply(id){
	$("#parent_id").val(id);
}
</#macro>
<#macro css_import>
</#macro>
<#macro css>
.login-box-title {
    text-align: right;
    vertical-align: middle;
    padding: 0.5rem;
}
.login-box input {
    border: 1px solid #d2d6de;
    padding: 0.7rem 0.5rem;
    width: 80%;
}
</#macro>
<@layout>
<section id="blog-details" class="padding-top">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-7">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="single-blog blog-details two-column">
                            <div class="post-content overflow">
                                <h2 class="post-title bold"><a href="#">${content.title!}</a></h2>
                                <h3 class="post-author"><a href="#">${content.summary!}</a></h3>
                                <p>${content.text!}</p>
                                <div class="post-bottom overflow">
                                    <ul class="nav navbar-nav post-nav">
                                        <li>${content.getTaxonomyAsUrl('category','><i class= "fa fa-tag" > </i')!'未分类'}</li>
                                        <li><a href="#"><i class="fa fa-clock-o"></i>${content.created?string('yyyy-MM-dd')!}</a></li>
                                        <li><a href="#"><i class="fa fa-eye"></i>${content.viewCount!'0'}</a></li>
                                        <li><a href="#comment"><i class="fa fa-comments"></i>${content.commentCount!'0'}</a></li>
                                    </ul>
                                </div>
                                <div class="blog-share">
                                    <span class='st_facebook_hcount'></span>
                                    <span class='st_twitter_hcount'></span>
                                    <span class='st_linkedin_hcount'></span>
                                    <span class='st_pinterest_hcount'></span>
                                    <span class='st_email_hcount'></span>
                                </div>

                                <div class="x-details-content x-padding-top-10 x-padding-bottom-10 aritcle">
                                    <#if OPTION('jpblog_wechat_pay_enable')?? && OPTION('jpblog_wechat_pay_enable')=='true'>
                                        <div class="reward-content">
                                            <p><img src="${CPATH}${OPTION('jpblog_wechat_pay_image')!}"/> </p>
                                            <p>${OPTION('jpblog_wechat_pay_tips')!'打赏一个呗~~'}</p>
                                        </div>
                                    </#if>
                                </div>
                                <div class="response-area">
                                    <#if content.isCommentEnable() >
                                        <form action="${CPATH}/comment/submit" method="post"  id="comment">
                                            <input type="hidden" name="cid" value="${(content.id)!}" >
                                            <input type="hidden" name="anchor" value="comment" >
                                            <input type="hidden" id="parent_id" name="parent_id" >
                                                <h3> 发表评论 </h3>
                                                <div class="x-layout-100 clearfix">
                                                    <textarea name="text" id="message" required="required" class="form-control" rows="5" placeholder="评论..."></textarea>
                                                </div>
                                            <div class="x-layout-100 clearfix login-box ">
                                                <#if OPTION('comment_need_captcha') ?? && OPTION('comment_need_captcha')=='true'>
                                                        <p class="x-pull-left x-layout-10 login-box-title">验证码：</p>
                                                        <p class="x-pull-left x-layout-20"><input type="text" name="comment_captcha"  required="required" class="form-control" rows="1"></p>
                                                        <p class="x-pull-left x-layout-60"><img cdn-exclude src="${CPATH}/captcha" onclick="this.src='${CPATH}/captcha?d='+Math.random();" ></p>
                                                </#if>
                                                    <button type="submit" class="btn btn-primary x-border-none pull-right x-margin-top-5">发表评论</button>
                                                </div>
                                        </form>
                                    </#if>
                                    <@jp.commentPage pageSize="10">
                                    <#if page ??>
                                        <h3 class="bold" id="clist">评论 ${page.totalRow!}条</h3>
                                            <ul class="media-list">
                                                <#list page.getList() as comment>
                                                    <li class="media">
                                                        <div class="post-comment">
                                                            <a class="pull-left" href="#">
                                                                <img class="media-object"  height="80" width="80" src="${CPATH}${comment.avatar!TPATH+'/assets/images/avatar.jpg'}" alt="">
                                                            </a>
                                                            <div class="media-body">
                                                                <span><i class="fa fa-user"></i> <a href="#">${comment.author!}</a></span>
                                                                <p>${comment.text!}</p>
                                                                <ul class="nav navbar-nav post-nav">
                                                                    <li><a href="#"><i class="fa fa-clock-o"></i>${(comment.created?string("yyyy-MM-dd"))!}</a></li>
                                                                    <li><a  href="#comment" onclick="reply('${comment.id!}')"><i class="fa fa-reply"></i>回复</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <#if comment.qc_content ??>
                                                            <div class="parrent">
                                                                <ul class="media-list">
                                                                    <li class="post-comment reply">
                                                                        <a class="pull-left" href="#">
                                                                            <img class="media-object"  height="80" width="80" src="${CPATH}${comment.qc_avatar!TPATH+'/assets/images/avatar.jpg'}" alt="">
                                                                        </a>
                                                                        <div class="media-body">
                                                                            <span><i class="fa fa-user"></i> <a href="#">${comment.qc_author!}</a></span>
                                                                            <p>${comment.qc_content!} </p>
                                                                            <ul class="nav navbar-nav post-nav">
                                                                                <li><a href="#"><i class="fa fa-clock-o"></i>时间</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </#if>
                                                    </li>
                                                </#list>

                                            </ul>

                                        <#if (page.totalRow > 10 )>
                                            <div class="portfolio-pagination">
                                                <ul class="pagination">
                                                    <@pagination anchor="clist">
                                                    <#list pages as pi>
                                                        <li class="${pi.style!}">
                                                            <a href="${pi.url!}">${pi.text!}</a>
                                                        </li>
                                                    </#list>
                                                </@pagination>
                                                </ul>
                                            </div>
                                        </#if>

                                    </#if>
                                </@jp.commentPage>
                            </div><!--/Response-area-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-5">
            <#include "_content_box1.html"/>
            <#include "_content_box2.html"/>
            <#include "_tags_box.html"/>
        </div>
    </div>
    </div>
</section>
</@layout>
